<template>
	<w-container class='page-bg'>
		<u-sticky style="top: 0;" id="sticky">
			<w-navbar :fixed="false">
				<view slot='center' style="width: 614rpx;padding-left: 40rpx;">
					<u-search 
					
					@focus='focus' 
					@blur='blur' 
					:focus='hasFocus' 
					bgColor='#fff' 
					placeholder="请输入搜索内容"
					v-model="keyword" 
					:showAction='false' 
					@search='search' 
					color="#222"
					search-icon-color="#222"
					></u-search>
				</view>
			</w-navbar>
			<view class="plr-40" v-if="!showHistory && keyword">
				<w-tabs :tabList="tabList2" :lineWidth="0" :itemStyle="{'height':'46px','padding':0}" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @change="changeTab"></w-tabs>
			</view>
		</u-sticky>
		
		<view class="history" v-if="showHistory&&loadingType!='loading'">
			<view class="flex flex-js-sb flex-ai-center pt-16 pb-24">
				<text class="font-color-main-text font-size-14">搜索历史</text>
				<w-icon size='20' name="delete" @click='clearHistory'></w-icon>
			</view>
			<view class="flex flex-w">
				<view 
				@click="search(item)" 
				class="br-24 font-size-12 font-color-main-text his-item plr-12 ptb-2 mr-8 mb-12" 
				v-for="(item,index) in history" :key="index">{{item}}</view>
			</view>
		</view>
		
		<view class="plr-16" v-if="!showHistory && keyword">
			<block v-for="(item,idx) in list" :key="idx">
				<myConsignmentsItem :item="item" :goods_type="goods_type" @refresh="refresh"></myConsignmentsItem>
			</block>
			<!-- 加载 -->
			<w-loading :type="loadingType" emptyType="search" class="mt-12" emptyTop="100"></w-loading>
		</view>
	</w-container>
</template>

<script>
	import { myConsignment } from '@/api/collection/index.js';
	import myConsignmentsItem from'./componens/my-consignments-item.vue';
	export default {
		components:{ myConsignmentsItem },
		data() {
			return {
				hasFocus: true,
				history: [],
				
				status:'',
				goods_type:'',
				page:1,
				loadingType:'none',
				isNext:true,
				list:[],
				keyword:'',
				
				tabList2:[
					{ name:'全部',type:'' },
					{ name:'数字藏品',type:'2' },
					{ name:'盲盒',type:'1' }
				],
				inactiveStyle:{
					color: '#ababab',
					fontSize: '14px'
				},
				activeStyle:{
					color: '#222',
					fontWeight: '500',
					fontSize: '14px'
				},
			};
		},
		computed: {
			showHistory() {
				return this.history.length && this.hasFocus
			},
			searchIcon() {
				let icon = this.keyword?`${this.$ossUrl}/static/icon/search4.png`:`${this.$ossUrl}/static/icon/search4.png`
				return icon
			}
		},
		onShow() {
			this.getHistory()
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			changeTab(e) {
				this.goods_type = e.type;
				this.refresh();
			},
			// 刷新
			refresh() {
				this.loadingType = 'none';
				this.isNext = true;
				this.list = [];
				this.page = 1;
				this.getList() 
			},
			search(word){
				if(!word) return;
				this.goods_type = '';
				this.keyword = word;
				this.refresh() 
			},
			getList() {
				if(!this.isNext) return;
				this.loadingType = 'loading';
				this.setHistory(this.keyword);
				myConsignment({
					keyword:this.keyword,
					status:this.status,
					goods_type:this.goods_type,
					page:this.page
				}).then(res=>{
					let { data,last_page } = res.data;
					this.list = [...this.list,...data];
					if(this.page<last_page){
						this.page++;
					}else{
						this.isNext = false;
						this.loadingType = 'nomore';
					}
					!data.length && (this.loadingType = 'empty');
				}).catch(()=>{})
			},
			clearHistory(){
				uni.removeStorageSync('consignments-history')
				this.getHistory()
			},
			//设置历史搜索
			setHistory(word) {
				if(!word) return;
				let list = this.getHistory();
				if (list.length > 9) {
					list.splice(10, 1);
				}
				if (list.indexOf(word) > -1) {
					list.splice(list.indexOf(word), 1)
				}
				list.unshift(word);
				uni.setStorageSync('consignments-history', JSON.stringify(list));
				this.history = list;
			},
			//获取历史搜索
			getHistory() {
				let list = uni.getStorageSync('consignments-history');
				if (!list) {
					this.history = []
				} else {
					this.history = JSON.parse(list);
				}
				return this.history
			},
			//聚焦
			focus() {
				this.hasFocus = true;
			},
			//失焦
			blur() {
				setTimeout(()=>{this.hasFocus = false;},100)
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	#sticky /deep/ .u-sticky__content {
		// background-image: url('@/static/bg/my-bg.png');
		// background-position: top;
		// background-size: 100% auto;
	}
	.history{
		width: 100%;
		padding: 0 32rpx;
	}
	.his-item{
		background: linear-gradient(139deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.09) 100%);
		border-image: linear-gradient(157deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.6)) 2 2;
		border: 2rpx solid;
	}
</style>
